<template>
	<view class="warp" v-if="row.id">
		<!-- 顶部 start -->
		<!-- #ifdef WEB -->
		<view class="navbar_top">
			<uv-navbar leftText="返回" :fixed="false" :title="title" border :safeAreaInsetTop="false" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="arrow-left" size="19"></uv-icon>
					</view>
				</template>
				<template v-slot:right>
					<view class="uv-nav-slot">
						<uv-icon name="home" size="19"></uv-icon>
					</view>
				</template>
			</uv-navbar>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<uv-navbar leftText="返回" :fixed="true" title="课程详情" border :safeAreaInsetTop="true" :placeholder="true" @leftClick="jumpUrl('1','navigateBack')" @rightClick="jumpUrl('/pages/index/index','redirectTo')">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon name="arrow-left" size="19"></uv-icon>
				</view>
			</template>
			<template v-slot:right>
				<view class="uv-nav-slot">
					<uv-icon name="home" size="19"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<!-- #endif -->
		<!-- 顶部 end -->
		<view class="d_box" :style="row.lesson_data && row.lesson_data.type == 1 && row.lesson_data.password==='' ?'position: fixed;':'position: relative;'">
			<!-- 课程盒子 start -->
			<view class="kc_box" v-if="row.lesson_data && row.lesson_data.password===''">
				<!-- 视频播放 start -->
				<view class="uni-padding-wrap uni-common-mt video_box video-controls-enhanced" v-if="row.lesson_data.type == 1">
					<view v-if="row.lesson_data.file_type == 1" class="video-container">
						<video 
						  id="myVideo" 
						  :src="row.lesson_data.video_file"
						  :controls="true"
						  :poster="row.image" 
						  :autoplay="false"
						  :show-progress="true"
						  :show-fullscreen-btn="true"
						  :show-play-btn="true"
						  :show-center-play-btn="true"
						  :show-loading="true"
						  :show-rate-btn="true"
						  :playback-rates="[0.5, 0.75, 1, 1.25, 1.5, 2]"
						  :enable-progress-gesture="true"
						  :page-gesture="false"
						  direction="0"
						  @timeupdate="handleTimeUpdate"
						  @ended="handleVideoEnd"
						  @error="videoErrorCallback"
						  @play="handleVideoPlay"
						  @pause="handleVideoPause"
						  @ratechange="handleRateChange"
						  @loadedmetadata="handleVideoLoadedData"
						  :danmu-list="danmuList" 
						  enable-danmu 
						  danmu-btn>
						</video>
						
						<!-- 自定义倍速控制面板（备用方案） -->
						<view class="custom-rate-panel" v-if="showCustomRate">
							<view class="rate-title">播放速度</view>
							<view class="rate-options">
								<view 
									class="rate-item" 
									:class="{ active: currentRate === rate }" 
									v-for="rate in customRates" 
									:key="rate"
									@click="setPlaybackRate(rate)">
									{{ rate }}x
								</view>
							</view>
							<view class="rate-close" @click="showCustomRate = false">
								<uv-icon name="close" size="16" color="#fff"></uv-icon>
							</view>
						</view>
						
						<!-- 视频信息显示 -->
						<view class="video-info" v-if="videoDuration > 0">
							<view class="time-display">
								{{ formatTime(videoCurrentTime) }} / {{ formatTime(videoDuration) }}
							</view>
							<view class="rate-display" @click="toggleCustomRatePanel">
								{{ currentRate }}x
							</view>
						</view>
					</view>
					<view v-if="row.lesson_data.file_type == 2">
						<!-- #ifdef MP-WEIXIN -->
						<view class="file_type2_box">
							<view class="video_card" @click="copyUrlFile(row.lesson_data.iframe_str)">
								<view class="card_l">
									<image :src="IMG_URL+'tv_one.png'" mode="aspectFit"></image>
								</view>
								<view class="card_r line_3">
									{{row.lesson_data.title}}
								</view>
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef WEB -->
						<iframe :src="row.lesson_data.iframe_str" frameborder="0" style="width: 100%;height: 36vh;"></iframe>
						<!-- #endif -->
					</view>					
				</view>
				<!-- 视频播放 end -->
				<!-- 音频播放 start -->
				<view class="audio_box" v-if="row.lesson_data.type == 2">
					<audio id="myAudio" :src="row.lesson_data.audio_file" :poster="IMG_URL+'music.png'" :name="row.lesson_data.title" :author="row.author_name" :action="audioAction" controls></audio>
				</view>
				<!-- 音频播放 end -->
				<!-- 文章 start -->
				<view class="text_box" v-if="row.lesson_data.type == 3">
					<uv-parse :content="row.lesson_data.content"></uv-parse>
				</view>
				<!-- 文章 end -->
				<!-- PDF start -->
				<view class="pdf_box" v-if="row.lesson_data.type == 4">
					<!-- #ifdef H5 -->
					<view class="pdf_iframe">
						<iframe ref="pdfIframeRef" :src="`${$BASE_URL}/assets/addons/classroom/pdfjs-3.6.172-dist/web/viewer.html?file=${row.lesson_data.pdf_file}`" width="100%" height="100%"></iframe>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="pdf_card" @click="copyUrlFile(row.lesson_data.pdf_file)">
						<view class="card_l">
							<image :src="IMG_URL+'pdf.png'" mode="aspectFit"></image>
						</view>
						<view class="card_r line_3">
							{{row.lesson_data.title}}
						</view>
					</view>
					<!-- #endif -->
				</view>
				<!-- PDF end -->
			</view>
			<view class="kc_none" v-else-if="row.lesson_data && row.lesson_data.password===1">
				<image :src="IMG_URL + 'login_img.png'" mode="aspectFit"></image>
				<view class="lesson_password">
					<uv-input placeholder="请输入密码" border="bottom" type="password" color="crimson" v-model="lesson_password"></uv-input>
					<uv-button type="primary" text="验证" @click="open_lock"></uv-button>
				</view>
			</view>
			<view class="kc_none" v-else>
				<image :src="IMG_URL + 'none.png'" mode="aspectFit"></image>
				<view class="none_text">
					暂无课程...
				</view>
			</view>
			<!-- 课程盒子 end -->
			
			<!-- 分段器 start -->
			<view class="subsection_box">
				<uv-subsection :list="subsection" :current="subsection_current" mode="button" @change="subsection_change" custom-item-style="border-radius: 6rpx;" fontSize="26rpx"></uv-subsection>
			</view>
			<!-- 分段器 end -->
		</view>
		<view class="d_box_video" v-if="row.lesson_data && row.lesson_data.type == 1 && row.lesson_data.password===''"></view>
		<!-- #ifdef WEB -->
		<uv-gap height="100rpx" bgColor="#F1F1F5" v-if="row.lesson_data && row.lesson_data.type == 1 && row.lesson_data.password===''"></uv-gap>
		<!-- #endif -->
		<!-- box1 start -->
		<view class="box1" v-show="subsection_current == 0">
			<view class="title_box">
				<view class="title_text">
					{{row.name}}
				</view>
				<view class="course_other">					
					<view class="course_num">
						(共{{row.lesson_num}}个课程)
					</view>
					<view class="course_kaoshi" v-if="row.status === 'wait_test' && row.test_data" @click="jumpUrl(`/exam/pages/room/detail?id=${row.test_data}`, 'redirectTo')">考试</view>
					<view class="course_kaoshi" v-else-if="row.status === 'completed'">完成学习</view>
					<view class="course_kaoshi" v-else-if="row.status === 'issued'">已颁发证书</view>
					<view class="course_kaoshi" v-else-if="row.status === 'study_finished'">完成课程</view>
					<!-- Check if cert_status is 1 (certified) -->
					<view v-else></view>
				</view>
				
			</view>
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
			<!-- 课程介绍 start -->
			<view class="course_box">
				<view class="course_title">
					<view class="title_icon">
						<image :src="IMG_URL+'course.png'" mode="aspectFit"></image>
					</view>
					<view class="title_text">
						课程介绍
					</view>
				</view>
				<view class="course_info">
					<uv-parse :content="row.content"></uv-parse>
				</view>
			</view>
			<!-- 课程介绍 end -->
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
			<!-- 讲师介绍 start -->
			<view class="course_box">
				<view class="course_title">
					<view class="title_icon">
						<image :src="IMG_URL+'author.png'" mode="aspectFit"></image>
					</view>
					<view class="title_text">
						讲师介绍
					</view>
				</view>
				<view class="course_info">
					<uv-parse :content="row.author_content"></uv-parse>
				</view>
			</view>
			<!-- 讲师介绍 end -->
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
		</view>
		<!-- box1 end -->
		<!-- box2 start -->
		<view class="box2" v-show="subsection_current == 1">
			<view class="course_box">
				<view class="course_title">
					<view class="title_icon">
						<image :src="IMG_URL+'zhangjie.png'" mode="aspectFit"></image>
					</view>
					<view class="title_text">
						章节列表
					</view>
				</view>
				<view class="course_list">
					<view class="course_item" v-for="(v,k) in row.lesson_rows" :key="k" @click="jumpUrl(`/pages/course/details?id=${row.id}&lesson_id=${v.id}`,'redirectTo')">
						<view class="left">
							<view class="item_tag" :style="{borderColor:v.type_color,color:v.type_color}">
								<image :src="IMG_URL+v.type_img" mode="aspectFit"></image>
								{{v.type_name}}
							</view>
							<view class="lock" v-if="v.password">
								<image :src="IMG_URL+'lock.png'" mode="aspectFit"></image>
							</view>
							<view class="item_title line_1">
								{{v.title}}
							</view>
						</view>
						
						<view class="right" v-if="!!row.progress && !!row.progress.chapters[k]">{{ !!row.progress.chapters[k].completed ? `已完成`: ``}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- box2 end -->
		<!-- box3 start -->
		<view class="box3" v-show="subsection_current == 2">
			<uv-gap height="10" bgColor="#fff"></uv-gap>
			<view class="push_box">
				<uv-input placeholder="在此处输入内容,请文明发言" border="bottom" v-model="danmuValue"></uv-input>
				<view class="push_btn">
					<uv-button text="发布" type="primary" @click="sendDanmu"></uv-button>
				</view>
			</view>
			<uv-gap height="10" bgColor="#F1F1F5"></uv-gap>
			<view class="msg_box">
				<view class="msg_title">
					<view class="title_icon">
						<image :src="IMG_URL+'zhangjie.png'" mode="aspectFit"></image>
					</view>
					<view class="title_text">
						<text>{{subsection[2]}}</text>列表
					</view>
				</view>
				<view class="push_list">
					<view class="push_item" v-for="(v,k) in msg_rows" :key="k">
						<view class="item_img">
							<image :src="v.avatar" mode="aspectFill"></image>
						</view>
						<view class="item_t">
							<view class="item_content">
								<view class="username">
									{{v.nickname}}
								</view>
								<view class="content">
									{{v.content}}
								</view>
							</view>
							<view class="item_time">
								{{customDate("Y-m-d H:i",v.createtime)}}
							</view>
						</view>
					</view>
					<uv-load-more :status="apiStatus" dashed line />
				</view>
			</view>
			
		</view>
		<!-- box3 end -->
		<uv-gap height="80rpx" bgColor="#F1F1F5"></uv-gap>
		<!-- 底部板块 start -->
		<view class="bottom_box">
			<view class="bottom_box_warp">
				<view class="bottom_box_l">
					<view class="img" @click="collect()" v-if="row_collect == 0">
						<uv-icon name="heart" color="#f5454d" size="24"></uv-icon>
						收藏
					</view>
					<view class="img" @click="collect()" v-else>
						<uv-icon name="heart-fill" color="#f5454d" size="24"></uv-icon>
						已收藏
					</view>
				</view>
				<view class="bottom_box_r" @click="study">
					开始学习
				</view>
			</view>
			<view class="bottom_box_zw"></view>
		</view>
		<!-- 底部板块 end -->
		<!-- 考试弹出层 start -->
		<uv-overlay :show="test_show">
			<view class="test_warp">
				<view class="test_box" @tap.stop>
					<view class="test_close" @click="test_show = false">
						<uv-icon name="close-circle" color="#2979ff" size="50rpx"></uv-icon>
					</view>
					<view class="test_list">
						<view class="test_item" v-for="(v,k) in row.test_data" :key="k" @click="test_show = false;jumpUrl('/exam/pages/room/detail?id='+v.id)">
							<view class="item_l">
								<image :src="IMG_URL+'test.png'" mode="aspectFit"></image>
							</view>
							<view class="test_r line_2">
								{{v.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uv-overlay>
		<!-- 考试弹出层 end -->
		<!-- 复制弹出层 start -->
		<uv-modal ref="copy_modal" title="提示" content="不支持在小程序直接打开，请复制后，到浏览器中打开。" confirmText="复制" showCancelButton buttonReverse @confirm="copy_confirm"></uv-modal>
		<!-- 复制弹出层 end -->
		
		<uv-popup ref="certPopup" :closeOnClickOverlay="false"  round="10">
			<view class="cert-content">
				<view class="btn-close cuIcon-close" @click="handleCertClose"></view>
				<view class="top">
					<i class="icon cuIcon-roundcheck"></i>
					<text class="text">您已完成了课程</text>
				</view>
				<view class="center">
					恭喜您获得了课程证书
				</view>
				<view class="bottom">
					<view class="btn" @click="handleCertDetail">查看</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		onReachBottom() {
			console.log('onReachBottom')
			if(this.subsection_current == 2){
				this.page++
				this.msgSearch()
			}
		},
		data() {
			return {
				domain: this.$BASR_URL,
				test_show: false,
				src: '',
				intervalId: null,
				/***** 弹幕 start *****/
				danmuList: [],
				danmuValue: '',
				currentTime: 0,// 初始化当前播放时间为0秒
				/***** 弹幕 end *****/
				
				/***** 视频播放增强 start *****/
				// 视频播放相关
				currentRate: 1, // 当前播放倍速
				showCustomRate: false, // 是否显示自定义倍速面板
				customRates: [0.5, 0.75, 1, 1.25, 1.5, 2], // 自定义倍速选项
				isPlaying: false, // 视频是否正在播放
				videoCurrentTime: 0, // 视频当前播放时间
				videoDuration: 0, // 视频总时长
				/***** 视频播放增强 end *****/
				
				// 分段器
				// subsection: ['详情','目录','弹幕'],
				subsection: ['详情','章节列表'],
				subsection_current: 0,
				// 
				course_id: '',
				lesson_id: '',
				row: {},
				msg_rows: [],
				record_log: {},
				// 
				page: 1,
				pagesize: 10,
				apiMore: true,
				apiStatus: 'loadmore',
				apiPost: false,
				row_collect: 0,
				
				audioAction: {
					method: 'pause'
				},
				lesson_password: '',
				lesson_lock: 'none',
				IMG_URL: this.$IMG_URL,
				copy_url: "",
				
				// 标题
				title: '',
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onLoad(options) {
			this.course_id = options.id
			this.lesson_id = options.lesson_id ? options.lesson_id : 0
			
			this.get_course()
		},
		onHide() {
			if(this.intervalId){
				clearInterval(this.intervalId)
				this.intervalId = null
			}
		},
		onUnload() {
			if(this.intervalId){
				clearInterval(this.intervalId)
				this.intervalId = null
			}
		},
		methods: {
			/***** 视频播放增强方法 start *****/
			/**
			 * 处理视频播放事件
			 */
			handleVideoPlay() {
				console.log('视频开始播放');
				this.isPlaying = true;
				// 可以在这里添加播放统计逻辑
			},
			
			/**
			 * 处理视频暂停事件
			 */
			handleVideoPause() {
				console.log('视频暂停播放');
				this.isPlaying = false;
			},
			
			/**
			 * 处理倍速变化事件
			 */
			handleRateChange(event) {
				console.log('播放倍速改变:', event.detail.rate);
				this.currentRate = event.detail.rate;
				
				// 可以在这里添加倍速变化的统计或其他逻辑
				uni.showToast({
					title: `播放速度: ${event.detail.rate}x`,
					icon: 'none',
					duration: 1000
				});
			},
			
			/**
			 * 自定义设置播放倍速（备用方案）
			 */
			setPlaybackRate(rate) {
				this.currentRate = rate;
				this.showCustomRate = false;
				
				// 通过 videoContext 设置播放倍速
				if (this.videoContext) {
					this.videoContext.playbackRate(rate);
				}
				
				uni.showToast({
					title: `播放速度: ${rate}x`,
					icon: 'none',
					duration: 1000
				});
			},
			
			/**
			 * 显示/隐藏自定义倍速面板
			 */
			toggleCustomRatePanel() {
				this.showCustomRate = !this.showCustomRate;
			},
			
			/**
			 * 视频加载完成事件
			 */
			handleVideoLoadedData(event) {
				console.log('视频加载完成:', event.detail);
				if (event.detail.duration) {
					this.videoDuration = event.detail.duration;
				}
			},
			
			/**
			 * 获取视频播放状态
			 */
			getVideoStatus() {
				return {
					isPlaying: this.isPlaying,
					currentTime: this.videoCurrentTime,
					duration: this.videoDuration,
					playbackRate: this.currentRate
				};
			},
			
			/**
			 * 跳转到指定时间
			 */
			seekToTime(time) {
				if (this.videoContext && time >= 0 && time <= this.videoDuration) {
					this.videoContext.seek(time);
				}
			},
			
			/**
			 * 格式化时间显示
			 */
			formatTime(seconds) {
				if (!seconds || isNaN(seconds)) return '00:00';
				
				const mins = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			},
			/***** 视频播放增强方法 end *****/
			
			async record_time() {
				const res = await this.$myRequest({
					url: "course/record_time",
					type: "post",
					data: {course_id:this.course_id,lesson_id:this.lesson_id}
				});
				if(res.code){
					this.record_log = res.data
					this.intervalId = setInterval(()=>{this.set_record_log()},10000);
				}
			},
			set_record_log(){
				var that = this
				uni.request({
					url: this.$BASE_URL + this.$API_URL + 'course/record_log?token=' + uni.getStorageSync("userInfo").token || "",
					data: {...this.record_log},
					method:"POST",
					success(res) {
						if(res.data.code){
							that.record_log.time = res.data.data.time
							that.record_log.signature = res.data.data.signature;
							
							that.row.status = res.data.data.status || that.row.status;
							
							// If status is 'issued', set issue_cert to true and open the popup
							if (that.row.status === 'issued') {
								that.setCertPopup({ issue_cert: true });
							}
						}
					}
				})
			},
			async get_course() {
				const res = await this.$myRequest({
					url: "course/details",
					type: "post",
					data: {id:this.course_id,lesson_id:this.lesson_id,lesson_password:this.lesson_password}
				});
				if(res.code){
					this.row = res.data
					this.row_collect = res.data.collect
					// this.subsection[2] = res.data.lesson_data && res.data.lesson_data.type == 1 && res.data.lesson_data.file_type != 2 ? '弹幕' : '评论'; 
					this.msg_rows = res.data.msg_data
					this.danmuList = res.data.danmuList
					if(this.danmuList.length == 0 && this.page == 1){
						this.apiStatus = 'nomore'
					}
					this.lesson_id = res.data.lesson_data ? res.data.lesson_data.id : 0
					this.lesson_lock = res.data.lesson_data ? res.data.lesson_data.lesson_lock : 'none'
					
					if(this.course_id && this.lesson_id && this.lesson_lock == 'open'){
						this.record_time()
					}
					
					// 设置标题
					this.title = res.data.name || '课程详情';
					
					// 是否弹出层
					this.setCertPopup(this.row);
				}
			},
			// 添加视频播放完成处理方法
			async handleVideoEnd() {
				console.log('视频播放完成');
				// 在这里添加你想要的处理逻辑
				// 例如：记录学习进度、显示提示等
				uni.showToast({
					title: '视频播放完成',
					icon: 'success'
				});
				
				// 如果需要调用API记录完成状态
				this.recordVideoCompletion();
			},
			
			// 可选：添加记录完成状态的方法
			async recordVideoCompletion() {
				try {
					const res = await this.$myRequest({
						url: "course/complete",
						type: "post",
						data: {
							course_id: this.course_id,
							lesson_id: this.lesson_id
						}
					});
					if(res.code) {
						
						let message = '本节视频播放完成';					
						
						// 
						this.row.status = res.data.status || this.row.status;
						
						// If status is 'issued', set issue_cert to true and open the popup
						if (this.row.status === 'issued') {
							this.setCertPopup({ issue_cert: true });
						}						
						uni.showToast({
							title: message,
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('记录播放完成状态失败:', error);
				}
			},
			/**
			 * 设置是否弹出层
			 */
			setCertPopup(item) {
				const { issue_cert } = item;
				
				if (issue_cert == 1) {
					this.$nextTick(() => {
						this.$refs.certPopup.open('center');
					})
				}
			},		
			// 收藏
			async collect() {
				const res = await this.$myRequest({
					url: "course/collect",
					type: "post",
					data: {course_id:this.course_id,lesson_id:this.lesson_id,collect:this.row_collect},
					showToast: 2
				});
				if(res.code){
					this.collect_status()
				}
			},
			// 查询收藏状态
			async collect_status() {
				const res = await this.$myRequest({
					url: "course/collect_status",
					type: "post",
					data: {course_id:this.course_id},
				});
				if(res.code){
					this.row_collect = res.data.collect_status
				}
			},
			// 留言列表
			async msgSearch() {
				if (this.apiPost || this.apiMore===false) {
					return false
				}
				const res = await this.$myRequest({
					url: "msg/msgSearch",
					type: "post",
					data: {course_id:this.course_id,lesson_id:this.lesson_id,page:this.page},
				});
				if(res.code){
					this.apiMore = res.data.length < this.pagesize ? false : true
					this.apiStatus = res.data.length < this.pagesize ? "nomore" : "loadmore";
					this.msg_rows = this.msg_rows.length > 0 ? [...this.msg_rows, ...res.data] : res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					})
					this.apiMore = false
					this.apiStatus = 'nomore'
				}
			},
			// 发布留言
			async msgAdd() {
				if(!this.lesson_id){
					uni.showToast({
						icon: 'none',
						title: "操作失败，该课程还没章节"
					})
					return false
				}
				const res = await this.$myRequest({
					url: "msg/msgAdd",
					type: "post",
					data: {
						course_id:this.course_id,lesson_id:this.lesson_id,content:this.danmuValue,
						second:this.currentTime
					},
				});
				if(res.code){
					this.page = 1
					this.pagesize = 10
					this.apiMore = true
					this.apiStatus = 'loadmore'
					this.apiPost = false
					this.msg_rows = []
					this.msgSearch()
				}
				uni.showToast({
					icon:'none',
					title: res.msg
				})
			},
			// 复制下载地址
			copyUrlFile(text) {
				this.copy_url = text
				this.$refs.copy_modal.open()
			},
			copy_confirm() {
				uni.setClipboardData({
					data: this.copy_url,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: "复制成功,请到浏览器中打开"
						})
					},
					fail: function () {
						uni.showToast({
							icon: 'error',
							title: '复制失败'
						})
					}
				});
			},
			/***** 弹幕 start *****/
			sendDanmu: function() {
				// 视频才有弹幕
				if(this.row.lesson_data && this.row.lesson_data.type == 1){
					console.log('弹幕提交')
					this.videoContext.sendDanmu({
						text: this.danmuValue,
						color: this.getRandomColor()
					});
				}
				// 
				this.msgAdd()
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content:  "视频不存在或播放出现错误",
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			handleTimeUpdate(event) {
				// 获取当前播放时间
				this.currentTime = event.detail.currentTime;
				this.videoCurrentTime = event.detail.currentTime;
				
				// 如果有总时长信息，也保存下来
				if (event.detail.duration) {
					this.videoDuration = event.detail.duration;
				}
			},
			/***** 弹幕 end *****/
			// 分段器
			subsection_change(index) {
				this.subsection_current = index;
			},
			// 学习 - 优化版本，增加倍速控制
			study() {
				console.log('study',this.row.lesson_data.type)
				if(this.row.lesson_data.type == 1){
					// 播放视频
					if (this.videoContext) {
						this.videoContext.play();
						// 确保控件显示
						this.videoContext.showStatusBar && this.videoContext.showStatusBar();
					}
				} else if(this.row.lesson_data.type == 3){
					// 返回顶部 阅读
					uni.pageScrollTo({
						scrollTop: 0
					})
				} else if(this.row.lesson_data.type == 2) {
					// 播放
					let audioContext = uni.createAudioContext('myAudio');
					audioContext.play();
				} else if(this.row.lesson_data.type == 4) {
					console.log('pdf 不做处理')
				}
			},
			// 验证密码
			async open_lock() {
				const res = await this.$myRequest({
					url: "course/open_lock",
					type: "post",
					showToast: 1,
					data: {lesson_password:this.lesson_password,lesson_id:this.lesson_id},
				});
				if(res.code) {
					this.lesson_lock = 'open'
					this.get_course()
				}
			},
			// 时间转换
			convertToTime(item) {
				const { start_date, end_date } = item;
				return `${start_date}-${end_date}`
			},
			
			/**
			 * 关闭证书弹框
			 */
			handleCertClose() {
				!!this.$refs.certPopup && this.$refs.certPopup.close()
			},
			
			/**
			 * 查看证书
			 */
			handleCertDetail() {
				console.log('row--------', this.row);
				
				this.handleCertClose();
				this.jumpUrl('/exam/pages/room/certificate')
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		padding-bottom: 20rpx;
		
		.navbar_top{
			z-index: 1000;background-color: red;position: relative;
			.uv-navbar{
				position: fixed;
				width: 100%;
				max-width: 1600rpx;
			}
		}
		.d_box{
			// #ifdef WEB
			padding-top: 44px;
			// #endif
			
			position: fixed;
			width: 100%;
			max-width: 1600rpx;
			z-index: 10;
			background-color: #FFF;
			.kc_box{
				// 播放
				.video_box{
					width: 100%;
					display: sticky;
					position: relative;
					
					// 视频容器
					.video-container {
						position: relative;
						width: 100%;
					}
					
					#myVideo{
						width: 100%;
						height: 36vh;
						max-height: 1600rpx;
						
						// 确保控件始终可见
						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							height: 60rpx;
							background: linear-gradient(transparent, rgba(0,0,0,0.3));
							pointer-events: none;
						}
					}
					
					// 自定义倍速控制面板样式
					.custom-rate-panel {
						position: absolute;
						top: 10rpx;
						right: 10rpx;
						background: rgba(0, 0, 0, 0.8);
						border-radius: 10rpx;
						padding: 20rpx;
						z-index: 1000;
						min-width: 200rpx;
						
						.rate-title {
							color: white;
							font-size: 26rpx;
							text-align: center;
							margin-bottom: 20rpx;
							font-weight: bold;
						}
						
						.rate-options {
							display: flex;
							flex-wrap: wrap;
							gap: 10rpx;
							margin-bottom: 15rpx;
							
							.rate-item {
								background: rgba(255, 255, 255, 0.2);
								color: white;
								padding: 10rpx 20rpx;
								border-radius: 6rpx;
								font-size: 24rpx;
								text-align: center;
								cursor: pointer;
								transition: all 0.3s ease;
								border: 1px solid transparent;
								flex: 1;
								min-width: 60rpx;
								
								&:hover {
									background: rgba(255, 255, 255, 0.3);
									transform: scale(1.05);
								}
								
								&.active {
									background: #4673EA;
									border-color: #4673EA;
									color: white;
									font-weight: bold;
								}
							}
						}
						
						.rate-close {
							text-align: center;
							padding: 5rpx;
							cursor: pointer;
							background: rgba(255, 255, 255, 0.2);
							border-radius: 50%;
							width: 60rpx;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 0 auto;
							
							&:hover {
								background: rgba(255, 255, 255, 0.3);
							}
						}
					}
					
					// 视频信息显示
					.video-info {
						position: absolute;
						top: 10rpx;
						left: 10rpx;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 8rpx;
						padding: 10rpx 15rpx;
						display: flex;
						align-items: center;
						gap: 20rpx;
						z-index: 999;
						
						.time-display {
							color: white;
							font-size: 22rpx;
							font-family: 'Courier New', monospace;
						}
						
						.rate-display {
							color: #4673EA;
							font-size: 22rpx;
							font-weight: bold;
							cursor: pointer;
							padding: 4rpx 8rpx;
							background: rgba(255, 255, 255, 0.2);
							border-radius: 4rpx;
							transition: all 0.3s ease;
							
							&:hover {
								background: rgba(255, 255, 255, 0.3);
								transform: scale(1.05);
							}
						}
					}
					
					.file_type2_box{
						height: 36vh;
						display: flex;
						flex-direction: column;
						justify-content: center;
						
						.video_card{
							margin: 0 40rpx;
							border: 1px solid #e0e0e0;
							border-radius: 8rpx;
							display: flex;
							align-items: center;
							padding: 20rpx 40rpx;
							cursor: pointer;
							transition: all 0.3s ease;
							
							&:hover {
								border-color: #4673EA;
								box-shadow: 0 4rpx 12rpx rgba(70, 115, 234, 0.2);
							}
							
							.card_l{
								margin-right: 20rpx;
								image{
									width: 100rpx;height: 100rpx;
								}
							}
							.card_r{
								font-size: 28rpx;
								color: #353535;
							}
						}
						
					}
				}
				// 音频box
				.audio_box{
					display: flex;
					justify-content: center;
					margin: 40rpx 0;
				}
				// 文章box
				.text_box{
					padding: 20rpx;
					width: 100%;
				}
				// PDFbox
				.pdf_box{
					width: 100%;
					.pdf_iframe{
						height: 60vh;
					}
				}
				// PDF卡片
				.pdf_card{
					margin: 40rpx 40rpx;
					border: 1px solid #e0e0e0;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					padding: 20rpx 40rpx;
					cursor: pointer;
					.card_l{
						margin-right: 20rpx;
						image{
							width: 100rpx;height: 100rpx;
						}
					}
					.card_r{
						font-size: 28rpx;
						color: #353535;
					}
				}
			}
			.kc_none{
				text-align: center;
				padding: 0rpx 0;
				image{
					width: 100%;
				}
				
				.lesson_password{
					margin: 50rpx auto 0;
					color: #61666d;
					font-size: 28rpx;
					width: 400rpx;
					display: flex;
					align-items: center;
				}
				.none_text{
					margin: 20rpx auto 0;
					color: #61666d;
					font-size: 28rpx;
					width: 200rpx;
				}
			}
			// 分段器
			.subsection_box{
				// background-color: #FFF;
			}
		}
		
		.d_box_video{
			width: 100%;
			max-width: 1600rpx;
			height: calc(36vh + 32px);
		}
		.d_box_text{
			width: 100%;
			max-width: 1600rpx;
			height: calc(32px);
		}
		
		// 视频控件增强样式
		.video-controls-enhanced {
			// 确保在小程序和H5中视频控件都能正常显示
			video {
				&::-webkit-media-controls {
					display: flex !important;
				}
				
				&::-webkit-media-controls-panel {
					display: flex !important;
				}
				
				&::-webkit-media-controls-timeline {
					display: flex !important;
				}
				
				&::-webkit-media-controls-current-time-display,
				&::-webkit-media-controls-time-remaining-display {
					display: block !important;
				}
			}
		}
		
		// box1
		.box1{
			background-color: #FFF;
			.title_box{
				// display: flex;
				// align-items: center;
				padding: 20rpx;
				.title_text{
					font-size: 32rpx;
					font-weight: bold;
				}
				.course_other{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.course_num{
						margin-left: 20rpx;
						margin-top: 20rpx;
					}
					.course_kaoshi{
						color: #FFF;
						font-size: 26rpx;
						background-color: crimson;
						border-radius: 8rpx;
						padding: 8rpx 20rpx;
					}
				}
				
			}
			.author_box{
				display: flex;
				align-items: center;
				padding: 20rpx;
				.author_l{
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}
				.author_r{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					height: 120rpx;
					.name_box{
						display: flex;
						align-items: center;
						.author_name{
							margin-right: 10rpx;
						}
						.author_num{
							font-size: 24rpx;
							color: rgb(48, 49, 51);
						}
					}
					.author_btn{
						border: 1px solid rgb(239,90,96);
						color: rgb(239,90,96);
						border-radius: 8rpx;
						padding: 6rpx 10rpx;
						text-align: center;
						font-size: 26rpx;
						width: 160rpx;
					}
				}
			}
			// 课程介绍
			.course_box{
				padding: 20rpx;
				.course_title{
					display: flex;
					align-items: center;
					border-bottom: 1px dashed #ccc;
					padding-bottom: 10rpx;
					.title_icon{
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.title_text{
						font-size: 32rpx;
						color: #1d1d1d;
						font-weight:bold;
					}
				}
				.course_info{
					font-size: 30rpx;
					padding: 10rpx 10rpx;
					color: #333;
				}
			}
		}
		// box2
		.box2{
			.course_box{
				padding: 20rpx;
				.course_title{
					display: flex;
					align-items: center;
					border-bottom: 1px solid #ccc;
					padding-bottom: 10rpx;
					.title_icon{
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #1d1d1d;
						font-weight: bold;
					}
				}
				// 章节列表
				.course_list{
					width: 100%;
					.course_item{
						display: flex;
						align-items: center;
						width:100%;
						margin-top: 20rpx;
						border-bottom: 1px dashed #ccc;
						padding-bottom: 20rpx;
						
						.left {
							flex: 1;
							display: flex;
							align-items: center;
							
							.course_img{
								margin-right: 20rpx;
								image{
									width: 37vw;
									height: 30vw;
									max-width: 400rpx;
									max-height: 300rpx;
								}
							}
							.item_tag{
								max-width: 120rpx;
								width: 100%;
								border: 1px solid #b1b1b1;
								border-radius: 8rpx;
								color: #656565;
								margin-right: 16rpx;
								padding: 2rpx 10rpx;
								font-size: 24rpx;
								text-align: center;
								display: flex;
								align-items: center;
								image{
									width: 30rpx;height: 30rpx;
									margin-right: 8rpx;
								}
							}
							.lock{
								image{
									width: 40rpx;height: 40rpx;
									margin-right: 8rpx;
								}
							}
							.item_title{
								color: #333;
							}
						}
						
						.right {
							padding: 4rpx 8rpx;
							margin-left: 10rpx;
							border-radius: 10rpx;
							font-size: 24rpx;
							background: #80C269;
							color: white;
						}
					}
				}
			}
			
		}
		// box3
		.box3{
			.push_box{
				margin: 20rpx;
				.push_btn{
					margin-top: 40rpx;
				}
			}
			.msg_box{
				padding: 20rpx;
				.msg_title{
					display: flex;
					align-items: center;
					border-bottom: 1px solid #333;
					padding-bottom: 15rpx;
					.title_icon{
						width: 40rpx;
						height: 40rpx;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.title_text{
						margin-left: 10rpx;
						font-size: 32rpx;
						color: #1d1d1d;
					}
				}
				.push_list{
					padding: 20rpx 0;
					.push_item{
						display: flex;
						margin-top: 20rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px dashed #ccc;
						.item_img{
							margin-right: 20rpx;
							image{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.item_t{
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.item_content{
								font-size: 28rpx;
								.username{
									color: #61666d;
									font-size: 24rpx;
								}
								.content{
									color: #18191C;
									text-indent: 1em;
									margin-top: 10rpx;
								}
							}
							.item_time{
								text-align: right;
								font-size: 24rpx;
								color: #909399;
							}
						}
					}
				}
			}
		}
		// 底部板块
		.bottom_box{
			position: fixed;
			bottom: env(safe-area-inset-bottom);
			width: 100%;
			max-width: 1600rpx;
			height: 80rpx;
			// border-top: 1px solid #dadbde;
			z-index: 100;
			background-color: #f2f2f2;
			
			.bottom_box_warp{
				display: flex;
				align-items: center;
				justify-content: center;
				
				.bottom_box_l{
					color: #989898;
					background-color: #FFF;
					font-size: 34rpx;
					width:50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						display: flex;
						align-items: center;
						color: #f5454d;
						cursor: pointer;
						// width: 50rpx;height: 50rpx;margin-right: 10rpx;
						// image{
						// 	width: 50rpx;height: 50rpx;
						// }
					}
				}
				.bottom_box_r{
					background-color: #4673EA;
					color: #FFF;
					width: 80%;
					font-size: 34rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 40rpx;
				}
			}
			.bottom_box_zw{
				background-color: #FFF;
				height: env(safe-area-inset-bottom);
			}
			
		}
		// 考试弹出层
		.test_warp{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			.test_box{
				width: 80%;
				height: 40vh;
				background: #FFF;
				position: relative;
				border-radius: 6rpx;
				.test_close{
					position: absolute;
					top: -18rpx;
					right: -18rpx;
					background-color: #FFF;
					border-radius: 50%;
				}
				.test_list{
					padding: 40rpx;height: 40vh;overflow-y: scroll;
					.test_item{
						display: flex;
						align-items: inherit;
						border-bottom: 2rpx dashed #989898;
						padding-bottom: 20rpx;
						margin-top: 20rpx;
						.item_l{
							margin-right: 20rpx;
							image{
								width: 40rpx;height: 40rpx;
							}
						}
					}
					.test_item:last-child{
						border-bottom: none;
					}
				}
			}
		}
	}
	
	// 响应式设计
	@media screen and (max-width: 750rpx) {
		.custom-rate-panel {
			right: 5rpx !important;
			top: 5rpx !important;
			min-width: 160rpx !important;
			padding: 15rpx !important;
			
			.rate-title {
				font-size: 24rpx !important;
				margin-bottom: 15rpx !important;
			}
			
			.rate-options {
				gap: 8rpx !important;
				
				.rate-item {
					padding: 8rpx 15rpx !important;
					font-size: 22rpx !important;
				}
			}
		}
		
		.video-info {
			padding: 8rpx 12rpx !important;
			gap: 15rpx !important;
			
			.time-display, .rate-display {
				font-size: 20rpx !important;
			}
		}
	}
	
	// 暗色主题适配
	@media (prefers-color-scheme: dark) {
		.custom-rate-panel {
			background: rgba(255, 255, 255, 0.9);
			
			.rate-title {
				color: #333;
			}
			
			.rate-options .rate-item {
				background: rgba(0, 0, 0, 0.1);
				color: #333;
				
				&:hover {
					background: rgba(0, 0, 0, 0.2);
				}
			}
			
			.rate-close {
				background: rgba(0, 0, 0, 0.1);
				
				&:hover {
					background: rgba(0, 0, 0, 0.2);
				}
			}
		}
	}
	
	.cert-content {
		padding: 40rpx 40rpx 0 40rpx;
		background-color: white;
		
		.btn-close {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			font-size: 30rpx;
			padding: 20rpx;
		}
		
		.top {
			.icon {
				color: #22BF22;
				font-size: 40rpx;
				margin-right:10rpx;
			}
			
			.text {
				font-weight: bold;
			}
		}
		
		.center {
			padding: 20rpx 10rpx 40rpx 40rpx;
			color: gray;
			font-size: 28rpx;
		}
		
		.bottom {
			border-top: 1px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 10rpx;
			.btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				cursor: pointer;
				color: #4673EA;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
	
	// H5下让video控件一直显示
	@media (min-width: 0px) {
		video::-webkit-media-controls {
			opacity: 1 !important;
			visibility: visible !important;
			pointer-events: auto !important;
			transition: none !important;
		}
		video::-webkit-media-controls-panel {
			opacity: 1 !important;
			visibility: visible !important;
			pointer-events: auto !important;
			transition: none !important;
		}
	}
</style>